<template>
    <div class="common-layout">
    <el-container>
      <el-header>
        <!--条件查询-->
        <el-form :inline="true" :model="form" class="demo-form-inline">
  <el-form-item label="设备名称">
    <el-input v-model="form.Device_Name" placeholder="请输入设备名称" clearable />
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="getDeviceInfo()">查询</el-button>
  </el-form-item>

          </el-form>
      </el-header>
      <el-main>
        <el-button style="background-color: yellowgreen;"  plain @click="dialogFormVisible = true">添加</el-button>
<!--添加弹框-->
<el-dialog v-model="dialogFormVisible" title="设备管理的添加" width="850" draggable>
  <el-form :model="Deviceform">
      
    <el-form-item label="设备品牌" :label-width="formLabelWidth">
      <el-select v-model="Deviceform.device_Brand" placeholder="请输设备品牌">
        <el-option label="欧姆龙" value="欧姆龙" />
        <el-option label="联影医疗" value="联影医疗" />
        <el-option label="美敦力" value="美敦力" />
      </el-select>
    </el-form-item>

    <el-form-item label="设备名称" :label-width="formLabelWidth">
      <el-input v-model="Deviceform.device_Name" autocomplete="off" placeholder="请输入设备名称"/>
    </el-form-item>

    <el-form-item label="设备型号" :label-width="formLabelWidth">
      <el-input v-model="Deviceform.device_Model" autocomplete="off" placeholder="请输入设备型号" />
    </el-form-item>

    <el-form-item label="设备SN号" :label-width="formLabelWidth">
      <el-input v-model="Deviceform.device_SN" autocomplete="off" placeholder="请输入设备SN号" @click="generateSN" readonly/>
    </el-form-item>
   

  </el-form>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="dialogFormVisible = false">关闭</el-button>
      <el-button type="primary" @click="AddDeviceInfo()">
        添加
      </el-button>
    </div>
  </template>
</el-dialog>
<!--修改弹框-->
<el-dialog v-model="dialogFormUdp" title="设备管理的编辑" width="850" draggable>
  <el-form :model="DeviceUdpinfo">
      
    <el-form-item label="设备品牌" :label-width="formLabelWidth">
      <el-select v-model="DeviceUdpinfo.device_Brand" placeholder="请输设备品牌">
        <el-option label="欧姆龙" value="欧姆龙" />
        <el-option label="联影医疗" value="联影医疗" />
        <el-option label="美敦力" value="美敦力" />
      </el-select>
    </el-form-item>

    <el-form-item label="设备名称" :label-width="formLabelWidth">
      <el-input v-model="DeviceUdpinfo.device_Name" autocomplete="off" placeholder="请输入设备名称" readonly/>
    </el-form-item>

    <el-form-item label="设备型号" :label-width="formLabelWidth">
      <el-input v-model="DeviceUdpinfo.device_Model" autocomplete="off" placeholder="请输入设备型号"    />
    </el-form-item>

    <el-form-item label="设备SN号" :label-width="formLabelWidth">
      <el-input v-model="DeviceUdpinfo.device_SN" autocomplete="off" placeholder="请输入设备SN号"    />
    </el-form-item>
   

  </el-form>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="dialogFormUdp = false">关闭</el-button>
      <el-button type="primary" @click="UdpDeviceInfo()">
        更改
      </el-button>
    </div>
  </template>
</el-dialog>
<!--设备管理列表-->
        <el-table :data="tableData" style="width: 100%">
    <el-table-column type="selection" width="55" />
    <el-table-column property="device_Id" label="编号" width="120" />
    <el-table-column property="device_Code" label="编码" width="180"/>
    <el-table-column property="device_Name" label="名称" width="120"/>
    <el-table-column property="device_Brand" label="品牌" width="120"/>
    <el-table-column property="device_Model" label="型号" width="120"/>
    <el-table-column property="device_SN" label="设备SN号" width="120"/>
    <el-table-column property="bind_Status" label="状态" width="120">
        <template v-slot="scoped">
        <el-tag  effect="dark" round>
      {{scoped.row.bind_Status?"启用":"禁用" }}
       </el-tag>        
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" min-width="120">
    <template v-slot="scope">
      <el-button style="background-color:red;"  plain @click="DelDeviceInfo(scope.row.device_Id)">删除</el-button>
      <el-button style="background-color:blue;" plain  :type="scope.row.bind_Status? 'danger' :'success'" size="small"
                 @click="UdpDeviceStatus(scope.row.device_Id)"
                 :label="scope.row.bind_Status? '禁用' :'启用'">
      {{scope.row.bind_Status? '禁用' :'启用'}}
    </el-button>   
    <el-button style="background-color: yellowgreen;"  plain @click="fantian(scope.row)">修改</el-button>
    
    </template>
  </el-table-column>
  </el-table>
    <!--分页-->
    <table style="margin: 15px auto;">
    <tbody>
        <tr>
            <!--总页数-->
            <td>
                <el-pagination
      v-model:current-page="page.pageIndex"
      v-model:page-size="page.pageSize"
      :page-sizes="[2, 4, 6, 8]"
      :background="true"
      layout=" total,slot,sizes"    
      :total="page.totalCount" prev-text="上一页" next-text="下一页"
    >
<span>每页{{ page.pageSize }}条,共{{ page.pageIndex }}/{{ page.totalPage }}行</span>
                </el-pagination>
            </td>
            <!--首页-->
            <td>
                <el-pagination
      v-model:current-page="page.pageIndex"
      v-model:page-size="page.pageSize"
      :page-sizes="[2, 4, 6, 8]"
      :background="true"
      layout=" solt,prev,pager,next"    
      :total="page.totalCount" prev-text="上一页" next-text="下一页">
      <button class="btn-prev" :disabled="page.pageIndex==1" @click="page.pageIndex=1">首页</button>
            </el-pagination>
            </td>
            <!--尾页-->
            <td>
                <el-pagination
      v-model:current-page="page.pageIndex"
      v-model:page-size="page.pageSize"
      :page-sizes="[2, 4, 6, 8]"
      :background="true"
      layout=" solt,jumper"    
      :total="page.totalCount" prev-text="上一页" next-text="下一页">
      <button class="btn-next" :disabled="page.pageIndex==page.totalPage" @click="page.pageIndex=page.totalPage">尾页</button>
            </el-pagination>
            </td>
        </tr>
    </tbody>
  </table>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import moment from 'moment';
import { onMounted, reactive, ref,watch } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { regionData } from "element-china-area-data";//引入
import { useCounterStore } from '@/stores/counter';
import type { TreeInstance } from 'element-plus'
const apiUrl = import.meta.env.VITE_APP_API_URL;
// console.log(regionData)
//pini保存
const store = useCounterStore();
//跳转
const router = useRouter();
const formLabelWidth = '140px'


//查询参数
const form = reactive({
    Device_Name:""
})
//分页的参数
const page = reactive({
    pageIndex:1,
    pageSize:5,
    totalCount:0,
    totalPage:0
})

//分页数据
const tableData =ref([])
//设备管理查询方法
const getDeviceInfo=()=>{
    axios.get(apiUrl+'/T7/BasicSettings/GetDeviceInfo',{
      params:{
          pageIndex:page.pageIndex,
          pageSize:page.pageSize,
          Device_Name:form.Device_Name,
      }
  }).then(res=>{
      tableData.value = res.data.list;
      page.totalCount = res.data.totalCount;
      page.totalPage = res.data.totalPage;
  })
}



//设备管理添加
//添加弹窗
const dialogFormVisible=ref(false)
//添加设备管理的参数
const Deviceform = reactive({
    "device_Name": "",
  "device_Model": "",
  "device_SN": "",
  "device_Brand": ""
})
// 生成设备型号（US+四位随机数）
const generateModel = () => {
  Deviceform.device_Model = `US${Math.floor(1000 + Math.random() * 9000)}`;
};

// 生成设备SN号（SN+时间戳）
const generateSN = () => {
    const timestamp = new Date().getTime();
    Deviceform.device_SN = `SN${timestamp}`;
};

// 弹窗打开时自动生成初始随机数
watch(dialogFormVisible, (newVal) => {
  if (newVal) { // 弹窗显示时
    //generateModel(); // 生成型号
    generateSN(); // 生成SN号
  }
});

const AddDeviceInfo=()=>{
    axios.post(apiUrl+'/T8/BasicSettings/AddDeviceInfo', Deviceform).then(res => {
        if (res.data.code == 212) {
          ElMessage.success(res.data.msg);
          dialogFormVisible.value = false;
          getDeviceInfo();
           // 添加成功后刷新页面
          window.location.reload();
        }else if(res.data.code == 201)
        {
          ElMessage.error(res.data.msg);
          dialogFormVisible.value = false;
          getDeviceInfo();
           // 添加成功后刷新页面
          //window.location.reload();
        }
         else {
          ElMessage.success("添加失败");
        }
      })
}


//删除
const DelDeviceInfo=(id:number)=>{
  ElMessageBox.confirm(
    '确认删除这一条数据嘛?',
    '警告!警告!',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {

      axios.put(apiUrl+'/T8/BasicSettings/DelDeviceInfo', { device_Id: id }).then(res => {
      if (res.data.code === 204) {
        ElMessage({
        type: 'success',
        message: '恭喜你删除成功!',
      })
        getDeviceInfo();
      } else {
        ElMessage({
        type: 'error',
        message: '很抱歉，删除失败!',
      })
      }
    })
    
    }).catch(() => {
      ElMessage({
        type: 'info',
        message: '取消成功！',
      })
    })

}

//启用禁用状态更改
const UdpDeviceStatus=(id:number)=>{
  ElMessageBox.confirm(
    '确认要更改状态嘛?',
    '警告！警告！',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {

axios.put(apiUrl+'/T8/BasicSettings/UdpDeviceStatus', { device_Id: id }).then(res => {
      if (res.data.code === 206) {
        ElMessage({
        type: 'success',
        message: '恭喜你更改成功!',
      })
        getDeviceInfo();
      } else {
        ElMessage({
        type: 'error',
        message: '很抱歉，更改失败!',
      })
      }
    })

    
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消成功',
      })
    })
}

//#region 修改操作
//修改的弹窗
const dialogFormUdp = ref(false)
//修改设备管理的参数
const DeviceUdpinfo = reactive({
    "device_Id": 0,
  "device_Name": "string",
  "device_Model": "string",
  "device_SN": "string",
  "device_Brand": "string"
})
//反填设备管理数据
const fantian=(row:any)=>{
    console.log(row)
    dialogFormUdp.value = true
    DeviceUdpinfo.device_Id = row.device_Id
    DeviceUdpinfo.device_Name = row.device_Name
    DeviceUdpinfo.device_Model = row.device_Model
    DeviceUdpinfo.device_SN = row.device_SN
    DeviceUdpinfo.device_Brand = row.device_Brand
}
//设备管理的修改
const UdpDeviceInfo=()=>{
  axios.put(apiUrl+'/T8/BasicSettings/UdpDeviceInfo', DeviceUdpinfo).then(res => {
        if (res.data.code == 206) {
          ElMessage.success(res.data.msg);
          dialogFormUdp.value = false;
          getDeviceInfo();
        } else {
          ElMessage.success("修改失败");
        }
      })
}
//#endregion




//分页监听器
watch(page,()=>{
    getDeviceInfo();
})


//构造函数
onMounted(()=>{
    getDeviceInfo();//设备管理列表
})


</script>

<style scoped>
/* 全局样式规范 */
:root {
  /* 企业主色（建议使用品牌色） */
  --primary-color: #409eff;
  /* 辅助色 */
  --success-color: #67c23a;
  --warning-color: #f90;
  --danger-color: #f56c6c;
  --info-color: #909399;
  
  /* 字体规范 */
  --font-primary: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-weight-medium: 500;
  
  /* 间距规范 */
  --padding-base: 16px;
  --margin-base: 12px;
  --line-height-base: 1.5;
  
  /* 表格样式 */
  --table-row-height: 44px;
}

/* 全局基础样式 */
.common-layout {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: #303133;
}

.el-container {
  min-height: 100vh;
}

.el-header {
  padding: var(--padding-base);
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebedf0;
}

.el-main {
  padding: var(--padding-base 24px);
  background-color: #fff;
}

/* 表单样式优化 */
.demo-form-inline {
  display: flex;
  align-items: center;
  gap: var(--margin-base);
}

.el-form-item {
  margin-bottom: 0;
}

.el-input,
.el-select {
  height: 40px;
  border-radius: 4px;
}

/* 按钮样式规范（统一使用组件内置类型，避免内联样式） */
.el-button {
  font-size: var(--font-size-base);
  border-radius: 4px;
  padding: 0 16px;
}

.el-button.primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.el-button.success {
  background-color: var(--success-color);
  border-color: var(--success-color);
}

.el-button.warning {
  background-color: var(--warning-color);
  border-color: var(--warning-color);
}

.el-button.danger {
  background-color: var(--danger-color);
  border-color: var(--danger-color);
}

/* 表格样式优化 */
.el-table {
  margin-top: var(--margin-base);
  border-radius: 8px;
  overflow: hidden;
}

.el-table__header-wrapper {
  background-color: #f5f7fa;
}

.el-table__row {
  height: var(--table-row-height);
}

.el-table__cell {
  padding: 0 16px;
  border-bottom: 1px solid #ebedf0;
  font-size: var(--font-size-base);
}

.el-table--striped .el-table__body tr.el-table__row--striped {
  background-color: #f9fafc;
}

/* 状态标签样式 */
.el-tag {
  font-size: var(--font-size-base);
  padding: 4px 12px;
}

/* 弹窗样式优化 */
.el-dialog {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.el-dialog__header {
  padding: var(--padding-base);
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebedf0;
}

.el-dialog__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
}

.el-dialog__body {
  padding: var(--padding-base 24px);
}

.el-form-item {
  margin-bottom: 20px;
}

/* 分页样式优化 */
.el-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end; /* 建议右对齐，符合企业规范 */
}

.el-pagination__sizes {
  margin-right: var(--margin-base);
}

.el-pagination__editor {
  width: 60px;
  margin: 0 8px;
}

/* 操作按钮组样式 */
.el-table__fixed-right {
  padding-right: 16px; /* 固定列右侧间距 */
}

.table-operation {
  display: flex;
  gap: 8px;
}

/* 禁用状态样式 */
[disabled],
.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .el-main {
    padding: var(--padding-base);
  }
  
  .el-table {
    font-size: 13px;
  }
}
</style>